<template>
  <div>
    <hd-header title="我的123" />
    <div class="backzong">
      <div class="backtop">

      </div>
      <div class="whitetx">
        <div class="nname">13000000000</div>
        <yd-flexbox>
            <yd-flexbox-item class="topicon">
              <yd-flexbox direction="vertical">
                <yd-flexbox-item>
                  <hd-svg-icon name="hd-myka" color="#8794F5" size=".7rem" ></hd-svg-icon>
                </yd-flexbox-item>
                <yd-flexbox-item>我的卡</yd-flexbox-item>
              </yd-flexbox>
            </yd-flexbox-item>
            <yd-flexbox-item class="topicon">
              <yd-flexbox direction="vertical">
                <yd-flexbox-item>
                  <hd-svg-icon name="hd-jifen" color="#8794F5" size=".7rem" ></hd-svg-icon>
                </yd-flexbox-item>
                <yd-flexbox-item>电子券</yd-flexbox-item>
              </yd-flexbox>
            </yd-flexbox-item>
        </yd-flexbox>
        <!-- <div class="myka">
          <svg class="iconka" aria-hidden="true">
            <use xlink:href="#hd-myka"></use>
          </svg>
          我的卡
        </div>
        <div class="myquan">
          <svg class="iconquan" aria-hidden="true">
            <use xlink:href="#hd-dianziquan-normal"></use>
          </svg>
          电子券
        </div> -->
      </div>
      <div class="divtouxiang">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504092001435&di=7ecc441424baccdab6ad108371cfcfb8&imgtype=jpg&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ffcfaaf51f3deb48f856b141ef91f3a292cf578eb.jpg">
      </div>
      <div>
        <yd-cell-group class="downbutten">
          <yd-cell-item arrow class="dbutten">
              <span slot="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#hd-dingdan"></use>
              </svg>&nbsp;&nbsp;我的订单
              </span>
              <span slot="right"></span>
          </yd-cell-item>
          <yd-cell-item arrow class="dbutten">
              <span slot="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#hd-huiminbutie"></use>
              </svg>&nbsp;&nbsp;我的补贴
              </span>
              <span slot="right"></span>
          </yd-cell-item>
          <yd-cell-item arrow class="dbutten">
              <span slot="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#hd-jifen"></use>
              </svg>&nbsp;&nbsp;我的积分
              </span>
              <span slot="right"></span>
          </yd-cell-item>
          <yd-cell-item arrow class="dbutten">
              <span slot="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#hd-qia"></use>
              </svg>&nbsp;&nbsp;我的卡夹
              </span>
              <span slot="right"></span>
          </yd-cell-item>       
      </yd-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
  
</script>

<style>
  body{
    background-color: #ffffff;
    font-family: "微软雅黑";
  }
  .backtop{
    width: 100%;
    height: 200px;
    background-color: #7987F4;
    z-index: -1;
  }
  .backzong{
    position: relative;
  }
  .whitetx{
    position: absolute;
    width: 90%;
    height: 150px;
    left: 5%;
    top: 100px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 5px 5px -2px #efeff9;
  }
  .divtouxiang{
    width: 80px;
    height: 80px;
    border-radius: 80px;
    /* background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504092001435&di=7ecc441424baccdab6ad108371cfcfb8&imgtype=jpg&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Ffcfaaf51f3deb48f856b141ef91f3a292cf578eb.jpg); */
    position: absolute;
    left: 40%;
    top: 60px;
  }
  .divtouxiang img{
    width: 80px;
    height: 80px;
    border-radius: 80px;
    border: 2px solid #ffffff;
  }
  .nname{
    margin: auto;
    margin-top: 45px;
    width: 50%;
    text-align: center;
    height: 20px;
  }
  .downbutten{
    width: 90%;
    border: 1px solid #f0f0f0;
    margin-left: 5%;
    margin-top: 70px;
    border-radius: 15px;
    box-shadow: 0px 7px 20px 0px #efeff9;
  }
  .dbutten{
    margin-left: 0px;
    width: 100%;
  }
  .cell-item:not(:last-child):after{
    margin-left: 0px;
  }
  .m-cell{
    border-radius: 15px;
  }
  .m-cell:after{
    border-bottom: 0;
  }
/* 阿里妈妈iconfont 设置 */
  .icon {
    /* 通过设置 font-size 来改变图标大小 */
    width: 1em; height: 1em;
    /* 图标和文字相邻时，垂直对齐 */
    vertical-align: -0.15em;
    /* 通过设置 color 来改变 SVG 的颜色/fill */
    fill: #8794F5;
    /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
        normalize.css 中也包含这行 */
    overflow: hidden;
  }
  .iconquan {
    /* 通过设置 font-size 来改变图标大小 */
    width: 80%; height: 50px;
    /* 图标和文字相邻时，垂直对齐 */
    vertical-align: -0.15em;
    /* 通过设置 color 来改变 SVG 的颜色/fill */
    fill: red;
    /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
        normalize.css 中也包含这行 */
    overflow: hidden;
  }
  .iconka {
    /* 通过设置 font-size 来改变图标大小 */
    width: 80%; height: 50px;
    /* 图标和文字相邻时，垂直对齐 */
    vertical-align: -0.15em;
    /* 通过设置 color 来改变 SVG 的颜色/fill */
    fill: yellow;
    /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
        normalize.css 中也包含这行 */
    overflow: hidden;
  }
  .myka{
    margin: auto;
    margin-left: 20%;
    margin-top: 5px;
    text-align: center;
    float: left;
    height: 68px;
    width: 20%;
    font-size: 15px;
  }
  .myquan{
    margin: auto;
    margin-top: 5px;
    margin-left: 20%;
    text-align: center;
    float: left;
    height: 68px;
    width: 20%;
    font-size: 15px;
  }
  .topicon{
    text-align: center;
  }
</style>
